<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outlot"></i>
				<span slot="center-slot">外勤签到</span>
				<!-- <i class="iconfont icon-youcecaidan" slot="right-slot"  @click="tapPopup(data)"></i> -->
			</navitop>
		</div>
		
		<div class="detial" :style='window_height'>
			<div style="background-color: #f0f0f0;" class="public_mag_top"></div>
			<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
				<div class="detial_text">
					<div class="record_img">
						<div>
							<i class="iconfont icon-qian" ></i>
						</div>
						<div>
							<text>{{dataSorce.crmName}}</text>
						</div>
					</div>
				</div>
				<div class="detial_texta">
					<textarea class="detial_textarea" v-model="dataSorce.remarks"></textarea>
				</div>
				<div class="record_sign">
					<div>
					</div>
					<div class="record_sign_text">
						<div>
							<text>我的位置：</text>
						</div>
						<div style="padding: 10px 0 10px 0;">
							<i class="iconfont icon-weizhi" style="color: #007aff;padding-right: 20rpx;font-size: 20px;"></i><text>{{visitSign}}</text>	
						</div>
					</div>
				</div>
				<div class="record_sign">
					<div>
						<text></text>
					</div>
					<div class="record_sign_text">
						<div>
							<text>目标位置：</text>
						</div>
						<div style="padding: 10px 0 10px 0;">
							<i class="iconfont icon-mubiao" style="font-size: 20px; color: rgb(113, 110, 110); padding-right: 20rpx;"></i><text>{{dataSorce.street}}</text>	
						</div>
					</div>
				</div>
				<div class="record_city">
					<text>&nbsp;</text>
					<text @click="citycli">定位不准?重新定位</text>
				</div>
				
				<div class="record_ph">
					<imgUploaddify :max="3" :headers="token"  v-model="ceshiData" :uploadSuccess="zidingyiSuccess" :action="action"></imgUploaddify>
				</div>
				
				<div class="record_time">
					<text>
						签到人: {{dataSorce.collarUserName}}
					</text>
					<text class="record_time_text">
						签到时间：{{dayTime}}
					</text>
				</div>
				
			</scroll-view>
		<div class="public_button" >
			<div class="public_text" @click="okclick">
				签&nbsp;&nbsp;到
			</div>
		</div>
		</div>
		<div ></div>
		<!-- 弹窗组件 -->
		
		
	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import imgUploaddify from "@/components/image-upload/image-upload"
	import {touchsave} from '@/common/api/job/jobapi.js'
	export default {
		components:{
			navitop,
			imgUploaddify
		},
		props:{
			selid: {
				default: ''
			},
			data: {
				default:''
			},
			url: {default:''}
		},
		data(){
			return {
				window_height:'',
				dataSorce: [],
				heigs:'',
				heigsdiv: 0,
				token: [],
				ceshiData: [], // 图片显示
				action: this.$serverUrl+'/uploadFile',
				dayTime: '', // 获取系统当前时间
				visitSign: '', // 获取定位信息
				sity: '',
				
			}
		},
		mounted() {
			this.cityclick();
			uni.onKeyboardHeightChange(res => {
				res.height = res.height + 50;
				this.heigsdiv = 'height:' + res.height  + 'px;' ;
				this.heigs = 'height:' + res.height + 'px;' ;
			})
		    const res = uni.getSystemInfoSync();
		    this.window_height = 'height:' + res.windowHeight + 'px;';
			this.token = {'Access-Token':uni.getStorageSync('token')};
			this.dataSorce = this.data;
			this.dataSorce.remarks = '我已到达客户现场,拜访此客户。';
		},
		methods:{
			
			outlot(){
				this.$emit('recodecolos',2)
			},
			
			// 添加 
			okclick(){
				let datas = {
					'crmId':this.dataSorce.id,
					'crmName' : this.dataSorce.crmName,
					'remarks': this.dataSorce.remarks,
					'salesManName': this.dataSorce.collarUserName,
					'salesManId': this.dataSorce.collarUserId,
					'photograph': this.ceshiData.join(","),
					'visitSign': this.visitSign,
					'type': 2
				}
				
				touchsave(datas).then((result)=>{
					if(result.code == 200){
						uni.showToast({
							title: "添加成功"
						})
						setTimeout(() => {
							// this.$emit('recodecolos',1)
						uni.navigateTo({
						    url: '/pages/common/index/detial?id=' + this.dataSorce.id + this.url + '&add_class=' + 'inbussadd'
						});
						},1500)
					}
						console.log(result);
				})
				
				console.log(datas)
			},
			
			// 定位
			cityclick(){
				var date =new Date();
				var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
				var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
				var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
				var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
				var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
				var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
				
				//获取当前系统时间  
				if(month < 10){
					month = 0 + String(month);
				}
				if(day < 10){
					day = 0 + String(day);
				}
				if(hours < 10){
					hours = 0 + String(hours);
				}
				if(minutes < 10){
					minutes = 0 + String(minutes);
				}
				// console.log(hours)
			
				var currentDate = year + "-" + month + "-" + day + " " + hours + ":" +minutes;
				this.dayTime = currentDate;
				let _this = this;
				uni.getLocation({
				  type: "gcj02",
				  geocode: true,
				  success: function (res) {
					  _this.visitSign = 
					  res.address.city 
					  +res.address.district
					  +res.address.street
					  +res.address.streetNum
					  +res.address.poiName;
					
				  },
				});
			},
			
			citycli(){
				
				uni.showLoading({
					title: '重定位中……',
					duration: 2000
				})
				let _this = this;
				uni.getLocation({
				  type: "gcj02",
				  geocode: true,
				  success: function (res) {
					 _this.sity = 
					  res.address.city 
					  +res.address.district
					  +res.address.street
					  +res.address.streetNum
					  +res.address.poiName;
				  },
				});
				console.log(this.sity)
				if(this.sity){
					setTimeout(()=>{
						this.visitSign = this.sity;
					},2000)
				}
			},
			
			// 图片删除
			tapPopup(val){
				let _this = this;
				this.value = true;
				if(val.title == "删除")
				{
					uni.showModal({
						title: '确定要删除吗？',
						success(res) {
							if(res.confirm){
								toudelet({ids: _this.uid}).then((result)=>{
									uni.showToast({
										title:'删除成功'
									})
									setTimeout(() => {
										uni.navigateTo({
										    url: '/pages/common/index/detial?id=' + _this.tpid + _this.url + "&index=" + 2			
										});
									},1500)
									
								})
							}
							if(res.cancel){
								
							}
						}
					})
					
				}
			},
			ceshiUploadSuccess(res) { //上传成功
			                /****************
			                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
			                ***************/
			                var _res = JSON.parse(res.data);
			                if (_res.code == 200) {
			                    this.ceshiData.push(_res.result);
			                }
			                /*******************************/
			            },
			zidingyiSuccess(res){
				var _res = JSON.parse(res.data);
				 this.ceshiData.push(_res.url);
				// this.imgurl.push(_res.url);
				console.log(_res)
				// var as = this.imgurl.join(",")
				// console.log(as)
				// console.log(as.split(","))
				if (_res.code == 200) {
					return {
						success: true,
						url: 'http://192.168.1.127:8000' + _res.result
					}
				} else {
					return {
						success: false,
						url: ''
					}
				}

			},
			
		}
	}
	
</script>

<style scoped lang="scss">
.detial {
	height: 100%;
	padding-top: 95rpx;
	width: 100%;
	background-color: #fff;
	.detial_text{
		padding-left: 20rpx;
		.record_img {
			display: flex;
			i {
				line-height: 90rpx;
				font-size: 20px;
				padding-left: 5px;
				color: red;
			}
			text {
				line-height: 90rpx;
			}
			
		}
		
	}
	
	.detial_text text{
		// width: 40%;
		text-align: left;
		padding-right: 10rpx;
		padding-left: 10rpx;
		color: #808080;
	}
	.detial_text span{
		// padding-left: 30rpx;
	}
	.detial_text input{
		// height: 90rpx;
		width: 60%;
		border: 1px solid #cacaca;
		border-radius: 4px;
	}
	
	input:hover {
			border: 1px solid #1890ff;
	}	
}

.detial_texta {
	border: 1px solid #cacaca;
	width: 93%;
	margin: auto;
	border-radius: 4px;
	.detial_textarea {
		padding: 0 10rpx 0 10rpx;
		width: 95%;
		height: 80px;
		
	}
}
.record_sign {
	display: flex;
	padding-left: 30rpx;
	margin-top: 10px;
	.record_sign_text {
		padding: 5rpx 0 5rpx 10rpx;
	}
}
.record_city {
	width: 95%;
	margin: auto;
	padding: 15rpx 0 15rpx 10rpx;
	display: flex;
	justify-content: space-between;
	color: #007aff;
	border-bottom: 1px solid #cacaca;
}

.record_ph {
	width: 95%;
	margin: auto;
	border-bottom: 1px solid #cacaca;
}

.record_time {
	height: 90rpx;
	line-height: 90rpx;
	display: flex;
	padding: 0 0 0 30rpx;
	// justify-content: space-between;
}
.record_time_text {
	padding-left: 10%;
}




.stats {
	width: 200px;
	height: 100rpx;
	z-index: 1;
}
.title {
	margin-top: 1px;
	height: 90rpx;
	background-color: #fff;
	line-height: 90rpx;
	padding-left: 10px;
	border-bottom: 1px solid #f0f0f0;
	border-radius: 4px;
}
.second_list {
	height: 90rpx;
	margin-top: 1px;
	background-color: #fff;
	line-height: 90rpx;
	padding-left: 20px;
	border-radius: 4px;

}
</style>
